<template>
  <div class="curent-page">
    <!-- 导航条 -->
    <el-form label-width="120px">
      <el-tabs value="basic">
        <el-tab-pane label="品牌" name="basic"></el-tab-pane>
        <el-tab-pane
          :label="brandItem.name"
          name="basic"
          v-for="(brandItem, brandIndex) in brands"
          :key="brandIndex"
        ></el-tab-pane>
      </el-tabs>
      <el-tabs value="basic">
        <el-tab-pane label="车型" name="basic"></el-tab-pane>
        <el-tab-pane
          :label="modelItem.name"
          name="basic"
          v-for="(modelItem, modelIndex) in models"
          :key="modelIndex"
        ></el-tab-pane>
      </el-tabs>
      <el-tabs value="basic">
        <el-tab-pane label="价钱" name="basic"></el-tab-pane>
        <el-tab-pane label="3万以下" name="basic"> </el-tab-pane>
        <el-tab-pane label="3-5万" name="basic"> </el-tab-pane>
        <el-tab-pane label="5-8万" name="basic"> </el-tab-pane>
        <el-tab-pane label="8-10万" name="basic"> </el-tab-pane>
        <el-tab-pane label="10-15万" name="basic"> </el-tab-pane>
        <el-tab-pane label="15-20万" name="basic"> </el-tab-pane>
        <el-tab-pane label="20-30万" name="basic"> </el-tab-pane>
        <el-tab-pane label="30万以上" name="basic"> </el-tab-pane>
      </el-tabs>
    </el-form>

    <!-- 车辆列表信息 -->
    <div class="car-container">
      <div
        class="car-list"
        v-for="(carItem, carIndex) in carLists"
        :key="carIndex"
      >
        <div class="car-header">
         <router-link :to="'/car/details/'+carItem._id" > <img :src="carItem.icon" style="height:210px;width:250px" /></router-link>
        </div>
        <div class="car-content">
          <div class="name">{{ carItem.name }}</div>
          <div class="milage">{{ carItem.milage }}</div>
          <div class="bottom">
            <div class="price">
              <span>{{ carItem.price }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      models: [], // 车型
      brands: [],

      carLists: [],
    };
  },
  methods: {
    async fetchCars() {
      const res = await this.$http.get("/getCars");
      console.log(res);
      this.carLists = res;
      console.log("车辆信息");
    },
    async fetchCategoryChildren(category) {
      // 需要传参数， category这个参数，后台可以接受到
      // 使用  req.query.category  在后端可以获取到
      const res = await this.$http.get("/getCategoryChildren", {
        params: {
          category: category,
        },
      });
      if (category == "品牌") {
        this.brands = res;
      } else if (category == "车型") {
        this.models = res;
      }
      console.log(category);
      console.log(res);
    },

    fetch() {
      //
      this.fetchCars();
      // 获取车型
      this.fetchCategoryChildren("车型");
      // 获取车颜色
      this.fetchCategoryChildren("颜色");
      //
      this.fetchCategoryChildren("品牌");
    },
  },

  created() {
    this.fetch();
  },
  
};
</script>

<style lang="scss" scoped>
.curent-page {
  .car-container {
    flex-wrap: wrap;
    display: flex;
    margin: 20 auto;
    width: 1080px;
    left: 10px;
   // margin-right: 150px;
    //border-radius: 20px;

    .car-list {
      margin-left:30px;
      width: 220px;
      margin-right:18px;
      //background: #e1f5fafb;
      background: #ffffff;

      .car-content {
        .name {
          margin: 10px 0;
        }

        .milage {
          margin: 10px 0;
          font-size: 6px;
        }

        .bottom {
          margin: 10px 0;
          .price {
            margin: 0;
            color:rgb(236, 129, 96);
            font-size:20px;
          }
          .detail {
            margin: 0 0 auto 0;
          }
        }
      }
    }
  }
}
</style>
